<template>
  <span :class="getClass">
    <slot></slot>
    <BasicHelp :class="`${prefixCls}-help`" v-if="helpMessage" :text="helpMessage" />
  </span>
</template>

<script lang="ts" setup>
import { useDesign } from '@/hooks/web/useDesign';
import { computed, PropType, useSlots } from 'vue';
import BasicHelp from './BasicHelp.vue'

const { prefixCls } = useDesign('basic-title');
const props = defineProps({
  /**
     *帮助文本列表或者是字符串
     * @default: ''
     */
  helpMessage: {
    type: [String, Array] as PropType<string | string[]>,
    default: '',
  },
  /**
   * 标题左侧是否存在色块
   * Whether the color block on the left side of the title
   * @default: false
   */
  span: { type: Boolean },
  /**
   * 默认文本不加粗
   * Whether to default the text, that is, not bold
   * @default: false
   */
  normal: { type: Boolean },
})

const slots = useSlots()

const getClass = computed(() => [
  prefixCls,
  { [`${prefixCls}-show-span`]: props.span && slots.default },
  { [`${prefixCls}-normal`]: props.normal },
]);
</script>